<template>
    <h1>VUE3.0学习---comput</h1>
    <div class = "test1">
        <h2>v-bind只能单向绑定，数据不能回流到js端</h2>
        姓名：<input type="text" :value="name"/><br/>
        年龄：<input type="number" :value="age"/><br/>
        <!-- <button @click="changeDataVBind">修改</button> -->
        <p>nameAndAgeBind：{{ nameAndAgeBind }}</p>
        <h2>v-model双向绑定</h2>
        姓名：<input type="text" v-model="name"/><br/>
        年龄：<input type="number" v-model="age"/><br/>
        <p>nameAndAgeModel：{{ nameAndAgeModel }}</p>
        <button @click="changeDataVModel">修改数据</button>
    </div>
</template>

<script lang="ts" setup>
    import { ref,computed } from 'vue';
    let name = ref("张三")
    let age = ref(18)
    // 这样的数据只能只读，不能修改
    let nameAndAgeBind = computed(() => {
        return name.value +"~" + age.value;
    })
    // let nameAndAgeModel = computed(() => {
    //     return name.value +"~" + age.value;
    // })
    console.log("name:",name,"age:",age)
    // function changeDataVBind(){
    //     console.log("name:",name,"age:",age)
    //     nameAndAgeBind.value = name.value +"~" + age.value
    // }
    //这里就可以进行更改数据
    let nameAndAgeModel = computed({
        get() {
            return name.value +"~" + age.value
        },set(newValue){
            console.log("newValue：",newValue)
        }
    })
    function changeDataVModel(){
        console.log("name:",name,"age:",age)
        nameAndAgeModel.value = name.value +"~" + age.value
    }
</script>

<style scoped>
 .test1{
    font-size: 20px;
    color: blue;
    background-color: greenyellow;
    border: 2px solid #007bff; /* 设置边框的宽度和颜色 */
    border-radius: 20px; /* 将四个角变成圆形 */
    width: auto; /* 设置元素的宽度 */
    height: auto; /* 设置元素的高度 */
    padding: 20px;
 }

 button{
    margin: 2px;
 }

</style>